<template>
    <div class="item">
<!-- 喜欢 -->
        <div class="item-left">
            <ul class="list">
                <li ><i :class="[isHit?heart:hearto]" @click="agree(infos)" class="iconfont icon-xihuan11"></i></li>
                <li>喜欢</li>
                <li>{{like}}</li>
                <li style="margin-top:15px"><i :class="[isCol?shoucang:shoucang1]" @click="collect(infos)" class="iconfont icon-shoucang4"></i></li>
                <li>收藏</li>
                <li style="margin-top:15px" @click="dialogVisible = true"><i class="iconfont icon-yuedu" ></i></li>
                <li >留言</li>
                <li>{{count}}</li>
                
              
            </ul>
        </div>
<audio class="audio" :src="infos.audio" controls="controls"></audio>
<!-- 文章内容 -->
        <div class="item-center"> 
            <p>{{infos.title}}</p>
            
            <p>
                <span><img :src="infos.author_img"></span>
                <span>{{infos.name}}</span>
                <span>{{infos.s_date | date('yyyy-MM-dd')}}</span>
            </p>
            <div class="text" v-html="infos.s_content">{{infos.s_content}}</div>

            <hr>
<!-- 评论区 -->
            <div class="comment">
                <h3>评论</h3>
                <ul class="u1">
                    <li class="u2" v-for="(comment, index) in comments" :key="index">
                    <div class="p1">
                        <p class="img"><img :src="comment.user_img" /></p>
                        <p class="p2">{{ comment.content }}</p>
                        
                    </div>
                    <div class="p5">
                        <p class="p3">{{ comment.user_name }}</p>
                        <p class="p6">{{comment.date | date('yyyy-MM-dd hh:mm:ss')}}</p>
                        <!-- <p class="p4"><button @click="del(comment)">删除</button></p> -->
                    </div>
                    </li>
                </ul>               
            </div>
        </div>

<!-- 简介区 -->
        <div class="item-right">
            <div class="wz1">作者简介</div>
            <div class="wz2">
                <p><img :src="infos.author_img"></p>
                <span>{{infos.name}}</span>
                <span>故事·{{infos.work_num}}</span>
            </div>
            <ul class="wz3">
                <li v-for="(item,index) in authors" :key="index">● {{item.title}}</li>
            </ul>
            <router-link :to="{name:'author',params:{id:infos.author_id}}">
            <div class="wz4"> <i class="icon icon-bars"></i>&nbsp;&nbsp;&nbsp;点击查看更多</div>
            </router-link>
        </div>

        <el-dialog
  title="发表留言"
  :visible.sync="dialogVisible"
  width="40%"
  >
  <span>请输入留言：</span>
  <textarea  class="myliuyan" v-model="newcomment" placeholder="输入留言内容" />
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addComment">确 定</el-button>
  </span>
</el-dialog>

    </div>
    
</template>

<script>

export default {
    name:"storyDetail",
    data(){
        return{
            newcomment:'',
            infos:[],
            like:'',
            comments:[],
            authors:[],
            id:'',
            count:'',
            isHit:"",//未点赞-true 已点赞-false
            isCol:"",
            heart:"iconfont icon-xihuan11",//未点赞
            hearto:"iconfont icon-xihuanfill",
            shoucang:"iconfont icon-shoucang4",//没点赞
            shoucang1:"iconfont icon-shoucang6",
            dianzan:[],
            dialogVisible: false,
            audio: new Audio()
         
        }
    },
    methods:{
        
        del(comment) {
            // console.log(comment.comment_id,+'123'),
            this.$axios.get(    
                '/deletecomment.do?comment_id='+comment.comment_id
                +'&story_id='+this.$route.params.id
                ).then(response=>{
                this.comments = response.data;
               
            })
        },
        addComment() {
           this.id=window.localStorage.getItem("uid");
           this.key = "false"
           this.key = window.localStorage.getItem("flag");
           
            if(this.key=="true"){
                this.dialogVisible = false
           console.log(this.newcomment)
            this.$axios.get(
                '/addcomment.do?content='+this.newcomment
                +'&user_id='+this.id
                +'&story_id='+this.$route.params.id
                ).then(response=>{
                this.comments = response.data;
                console.log("用户ID"+this.id+"故事ID"+this.$route.params.id)
            
            })
            }else{
                alert("请先登录")
            }
           
        },
        agree(){
            this.id=window.localStorage.getItem("uid");

            if(this.isHit == false){//当前为已点赞状态
                console.log(this.isHit+"已经点赞")
                console.log(this.id+"取消点赞的用户ID")
                this.$axios.get(
                '/deletelike.do?user_id='+this.id
                +'&story_id='+this.$route.params.id
                ).then(response=>{
                    this.cg=response.data;
                if(this.cg > 0){
                    alert("取消点赞失败！")
                }else{
                    alert("取消点赞成功！");
                    this.isHit=true;
                }
            
                }) 
            }else{
                this.$axios.get(
                    '/addlike.do?user_id='+this.id
                    +'&story_id='+this.$route.params.id
                    ).then(response=>{
                    if(response.data>0){
                        alert("点赞成功！")
                        this.isHit=false;
                    }else{
                        alert("点赞失败！")
                    }

                
                })
            }
             
        },

        collect(){
            this.id=window.localStorage.getItem("uid");
            if(this.isCol ==false){
               
                console.log(this.isCol)

                this.$axios.get(
                '/delcollect.do?user_id='+this.id
                +'&story_id='+this.$route.params.id
                ).then(response=>{
                    this.cg=response.data;
                if(this.cg > 0){
                    alert("取消收藏成功！")
                    this.isCol=true;
                }else{
                    alert("取消收藏成功！")
                    
                }
            
                })
                
            }else{
                this.id=window.localStorage.getItem("uid");
                this.$axios.get(
                    '/addcollect.do?user_id='+this.id
                    +'&story_id='+this.$route.params.id
                    ).then(response=>{
                    if(response.data>0){
                        alert("收藏成功！")
                        this.isCol=false;
                    }else{
                        alert("收藏失败！")
                    }

                
                })
            }
        }
       
    },
    computed:{
    },
    mounted(){
        this.id=window.localStorage.getItem("uid");//获取用户ID

        console.log(this.$route.params.id+"故事ID")
         this.$axios.get('/getStoryByid.do?story_id='+this.$route.params.id).then(response=>{
             console.log('选取'),
             this.infos=response.data,
             console.log(this.infos);
             this.like=this.infos.like;
                console.log(this.infos.author_id+'作者ID')
            this.$axios.get('/getworks.do?author_id='+this.infos.author_id).then(response=>{
                this.authors = response.data
            }) 
         }).catch(function(error){
             console.log(error);
         })


         this.$axios.get('/comment.do?story_id='+this.$route.params.id).then(response => {
             this.comments = response.data,
             console.log(this.comments);
         }).catch(function(error){
             console.log(error);
         })


this.user_id=window.localStorage.getItem("uid");
console.log(this.user_id+"用户ID")
console.log(this.$route.params.id+"故事ID")
         this.$axios.get(
        '/getlikebyid.do?user_id='+this.user_id
        +'&story_id='+this.$route.params.id
        ).then(response=>{
            this.dianzan=response.data,
            console.log(response.data.user_id+"刚进入的点赞数据")
            if(response.data.user_id == this.user_id){
                this.isHit=false;//点
            }else{
                this.isHit=true;//没点了
            }
        }).catch(function(error){
             console.log(error);
         })

        this.$axios.get(
        '/getCollectbyid.do?user_id='+this.user_id
        +'&story_id='+this.$route.params.id
        ).then(response=>{
            console.log(response.data+"刚进入的收藏数据")
            if(response.data.user_id == this.user_id){
                this.isCol=false;//点
            }else{
                this.isCol=true;//没点了
            }
        }).catch(function(error){
             console.log(error);
         })   

    },
    updated(){
         this.$axios.get('/Count.do?story_id='+this.$route.params.id).then(response => {
             this.count = response.data,
             console.log(this.count);
         })
    }
};
</script>
<style scoped="scoped">

.item-left{
    position: fixed;
    top: 50px;
    padding-top: 100px;
    width: 15%;
}
.item-center{
    margin-left: 12%;
    width: 60%;
    margin-right: 12%;
}
.item-right{
    position: fixed;
    top: 90px;
    right: -20px;
    width: 23%;
}
.list li{
    list-style: none;
}
.item-center>p:nth-child(1){
    font-size: 30px;
    font-weight: 700;
    text-align: left;
    color: rgb(161, 17, 89);
    letter-spacing: 11px;
    margin-bottom: 50px;
    margin-top: 50px;
}
.item-center>p:nth-child(2){
    text-align-last: left;
    font-size: 15px;
    font-weight: 700;
    display: flex;
}
.item-center>p:nth-child(2)>span:nth-child(1){
    width: 5%;
    margin-right: 7px;
}
.item-center>p:nth-child(2)>span:nth-child(1) img{
    width: 37px;
    border-radius: 50%;
}
.item-center>p:nth-child(2)>span:nth-child(2){
    padding-top: 5px;
    width: 90%;
}
.item-center>p:nth-child(2)>span:nth-child(3){
    width: 15%;
    
}
.text{
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 40px;
    word-break:break-word;
    text-align-last: left;
    text-indent: 2em;
}
.item-right{
    margin: 50px;
    border: 0.5px #ccc solid;
    border-radius: 10px;
}
.wz1{
    height: 70px;
    border-bottom: 0.5px solid #ccc;
    line-height: 70px;
    font-size: 30px;
    text-align: left;
    text-indent: 30px;
}
.wz2{
    height: 70px;
    border-bottom: 0.5px solid #ccc;
    line-height: 70px;
    font-size: 15px;
    text-align: left;
    text-indent: 30px;
    display: flex;
    background-color: rgb(240, 240, 240);
}
.wz2 p img{
    width: 45px;
    border-radius: 50%;
}
.wz2>span:nth-child(1){
   width: 10%;
   
}
.wz2>span:nth-child(2){
   width: 55%;
}
.wz2>span:nth-child(3){
    width: 30%;
}
.wz3{
    padding-left: 30px;
    padding-top: 15px;
    background-color: rgb(240, 240, 240);
    margin: 0;
	padding-right: 15px;
}
.wz3>li{
    height: 30px;
    line-height: 40px;
    text-align-last: left;
    font-size: 15px;
    color: rgb(71, 67, 67);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.wz4{
    height: 39px;
    line-height: 39px;
    background-color: rgb(240, 240, 240);
    border-top: 0.5px solid #ccc;
    border-radius: 0 0 10px 10px;
    color: rgb(175, 85, 85);
    font-size: 15px;
    
}
a{
    text-decoration: none;
}


/* .comment {
  height: 1000px;
} */
.comment h3 {
  color: chocolate;
  font-size: 25px;
  padding-bottom: 10px;
  text-align: left;
  margin-left: 50px;
  border-bottom: 1px solid #ccc;
}
.u1 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.u2 {
  list-style: none;
  height: 80px;
  border-bottom: 1px solid #ccc;
  margin-left: 50px;
  padding-top: 10px;
}
.p1 {
  height: 30px;
  margin-left: 50px;
  display: flex;
  padding-bottom: 30px;
}
.p3 {
  width: 50%;
  text-align: left;
  line-height: 30px;
  height: 30px;
  margin-left: 55px;
  margin-top: 5px;
  margin-bottom: 0;
}
.u2 img {
  width: 40px;
  border-radius: 100%;
}
.p4 {
  width: 10%;
  text-align: right;
  margin-right: 30px;
}
.p2 {
  height: 30px;
  line-height: 50px;
  margin-left: 50px;
  font-size: 18px;
}
.p5 {
  display: flex;
}
.p6{
    width: 30%;
    text-align: right;
}
.form-control {
  width: 60%;
  margin-left: 50px;
}
.add {
  display: flex;
  margin-left: 20%;
}
.brn {
  margin-left: 10px;
}
.icon-xihuan11{
    font-size: 40px;
} 
.icon-shoucang4{
    font-size: 40px;
}
.icon-shoucang6{
    color: rgb(223, 223, 74);
}
.icon-yuedu{
    font-size: 40px;
}
.icon-xihuanfill{
    color: rgba(253, 110, 110);
}
.myliuyan{
    width: 400px;
}
.audio{
    position: fixed;
    top: 60px;
    right: 60px;
}
</style>